<template>
  <!-- 单个块 -->
  <div class="Item">
    <div class="Item_wrapper">
      <router-link :to="path">
        <div class="pic">
          <!-- 右上角标记 -->
          <slot name="marker"><div class="marker" v-if="marker">{{marker}}</div></slot>
          <!-- 图片 -->
          <img
            src="https://images.pexels.com/photos/3690511/pexels-photo-3690511.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            alt=""
          />
        </div>
        <slot name="content">
          <!-- <div class="content">
            <van-row><p class="title">欧派家居-石家庄店</p> </van-row>
            <van-row type="flex" justify="space-between">
              <van-col>
                <van-tag color="#555" size="medium" plain round
                  >先装修后支付</van-tag
                >
              </van-col>
              <van-col>
                <van-tag color="#555" size="medium" plain round>样板间</van-tag>
              </van-col>
            </van-row>
            <van-row type="flex" justify="space-between">
              <van-col class="info1">
                <p>平台签约门店</p>
                <van-icon name="coupon" color="#777" />
              </van-col>
              <van-col class="info1">
                <p class="distance">1.8km</p>
              </van-col>
            </van-row>
          </div> -->
        </slot>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Item",
  props:{
    path:String,
    marker:String
  }
};
</script>

<style scoped>
.info1 {
  display: flex;
  margin-top: 2.2vw;
}
.info1 p {
  font-size: 3.733vw;
  height: 4.4vw;
  line-height: 4.4vw;
  margin-right: 1.6vw;
  color: #777777;
}
.info1 .distance {
  font-size: 3.2vw;
  color: #000;
}
.info1 .i {
  font-size: 4.4vw;
}
.title {
  margin: 2.2vw 0vw;
  color: #333;
}
.Item_wrapper {
  width: 42.666vw;
  margin: 0vw 1.6vw;
  background-color: #ffffff;
  margin-bottom: 2.667vw;
}
.Item_wrapper .pic {
  width: 42.666vw;
  height: 42.666vw;
  overflow: hidden;
  border-radius: 4vw;
  position: relative;
}
.marker {
  padding: 0.533vw 1.333vw;
  background-color: #d34a4a;
  color: #ffffff;
  font-size: 13.999px;
  line-height: 6.667vw;
  position: absolute;
}
.content {
  text-align: left;
}
</style>
